---
title: "Menu"
description: A collapsible menu that reveals actions or navigation options when triggered, distinct from a select as it is not used for form input.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Menu.html#props"]
---

## Basic
A menu presents a variety of actions or options from which you can choose.
<How toUse="collections/menu/menu-basic-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/menu
```

## Composed components
<Composed components={['dropdown', 'popover']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='menu' />

## Anatomy
```
import {
  IconCommandRegular,
  HomeIcon,
  IconDeviceDesktop,
  IconLogout,
  MoonIcon,
  IconSettings,
  SunIcon,
} from "@heroicons/react"
import {
  Menu,
  MenuContent,
  MenuHeader,
  MenuItem,
  MenuLabel,
  MenuSection,
  MenuSeparator,
  MenuSubMenu,
  MenuTrigger,
} from "@/components/ui/menu"
```
```
<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuContent popover={{ placement: "bottom" }} className="min-w-52">
    <MenuHeader separator>
      <span className="block">Kurt Cobain</span>
      <span className="font-normal text-muted-fg">@cobain</span>
    </MenuHeader>

    <MenuSection>
      <MenuItem href="#dashboard">
        <HomeIcon />
        <MenuLabel>Dashboard</MenuLabel>
      </MenuItem>
      <MenuItem href="#settings">
        <IconSettings />
        <MenuLabel>Settings</MenuLabel>
      </MenuItem>
    </MenuSection>
    <MenuSeparator />
    <MenuItem>
      <IconCommandRegular />
      <MenuLabel>Command Menu</MenuLabel>
    </MenuItem>
    <MenuSubMenu>
      <MenuItem>
        <IconDeviceDesktop />
        <MenuLabel>Switch theme</MenuLabel>
      </MenuItem>
      <MenuContent>
        <MenuItem>
          <IconDeviceDesktop />
          <MenuLabel>System</MenuLabel>
        </MenuItem>
        <MenuItem>
          <MoonIcon />
          <MenuLabel>Dark</MenuLabel>
        </MenuItem>
        <MenuItem>
          <SunIcon />
          <MenuLabel>Light</MenuLabel>
        </MenuItem>
      </MenuContent>
    </MenuSubMenu>
    <MenuSeparator />
    <MenuItem href="#contact-s">
      <MenuLabel>Contact Support</MenuLabel>
    </MenuItem>
    <MenuSeparator />
    <MenuItem href="#logout">
      <IconLogout />
      <MenuLabel>Log out</MenuLabel>
    </MenuItem>
  </MenuContent>
</Menu>
```

## Sub menu
Menu can be nested to display submenus.
<How toUse="collections/menu/menu-sub-demo" />

## Danger
Designate a menu item as dangerous.
<How toUse="collections/menu/menu-danger-demo" />

## With icon
Enhance menu items by adding icons.
<How toUse="collections/menu/menu-with-icon-demo" />

## Dynamic
Generate menu items dynamically.
<How toUse="collections/menu/menu-dynamic-demo" />

## Multiple
Display a selection of actions or options.
<How toUse="collections/menu/multiple-menu-demo" />


## Single menu
Present a single list of options.
<How toUse="collections/menu/single-menu-demo" />

## Section menu
Organize menu items into grouped sections.
<How toUse="collections/menu/menu-section-demo" />

## Section-level selection
Organize menu items into grouped sections with level selection.
<How toUse="collections/menu/menu-section-level-selection" />

## Arrow
Incorporate an arrow into the menu using the `arrow` from `popover` in the `MenuContent` component.
<How toUse="collections/menu/menu-with-arrow-demo" />

## Disabled
Disable specific menu items.
<How toUse="collections/menu/menu-disabled-demo" />

Also, you can disable items directly in `MenuContent` by using the `disabledKeys` prop.
```tsx
<MenuContent disabledKeys={['gsu']} />
```

## Menu label
In the examples above, you might notice that the `MenuLabel` component is used inconsistently. This is because it is not mandatory, but it is considered a best practice. Using `MenuLabel` ensures proper alignment between icons and text, especially when dealing with items that vary. For instance, one item might have an icon while another does not. Adding `MenuLabel` helps create a polished and consistent appearance.


## Description
You can add details to menu items by using the `MenuDescription` component.
<How toUse="collections/menu/menu-item-description-demo" />


## Open modal
Trigger a modal from a menu item. Refer to the [modal demo](/docs/components/overlays/modal#triggered-by-menu) for further information.
